<template>
	<view @longtap.stop="longtap">
		<canvas :width="info.destWidth" :height="info.destHeight" :canvas-id="item.id" :id="item.id"
			:style="{width:info.width,height: info.height}" v-for="item in info.listCode" :key="item.id"
			@error="handleError"></canvas>
	</view>
</template>
<!-- #ifdef  VUE3 -->
<script setup name="WQrcode">
	import {
		reactive,
		watch,
		onMounted,
		nextTick,
		getCurrentInstance
	} from 'vue';
	import {
		QRCode,
		GetImg,
		GetPixelRatio,
		GetPx
	} from '@/uni_modules/wmf-code/js_sdk/index.js';
	import {
		getUUid,
		deepClone,
		platform
	} from '../../common/helper.js'
	//定义props
	const props = defineProps({
		options: {
			type: Object,
			required: true,
			default: () => {
				return {}
			}
		}
	});
	const emits = defineEmits(['generate', 'press', 'error'])
	const opt = props.options;
	const that = getCurrentInstance();
	const SIZE = GetPx(opt.size);
	let info = reactive({
		destHeight: SIZE * GetPixelRatio() + 'px',
		destWidth: SIZE * GetPixelRatio() + 'px',
		width: SIZE + 'px',
		height: SIZE + 'px',
		listCode: [],
		id: getUUid(),
	})
	onMounted(() => {
		SpecialTreatment(opt);
		nextTick(() => {
			generateCode(opt)
		})
	});
	watch(() => props.options, (val) => {
		SpecialTreatment(val);
		const SIZE_Dynamic = GetPx(val.size);
		info.destWidth = GetPixelRatio() * SIZE_Dynamic + 'px',
			info.destHeight = GetPixelRatio() * SIZE_Dynamic + 'px',
			info.width = SIZE_Dynamic + 'px',
			info.height = SIZE_Dynamic + 'px',
			setTimeout(() => {
				generateCode(val)
			}, 50)
	}, {
		deep: true
	})
	const SpecialTreatment = (val) => { //渲染多个canvas特殊处理
		let obj = deepClone(val);
		obj.id = info.id;
		info.listCode = [obj]
	};
	const generateCode = (val) => {
		try {
			const parameter = {
				...val,
				source: platform(),
				id: info.id,
				ctx: that
			};
			QRCode(parameter, (res) => {
				emits('generate', res)
			})
		} catch (err) {
			console.warn(err)
		}
	};
	const GetCodeImg = async () => {
		try {
			return await GetImg({
				id: info.id,
				width: opt.width,
				height: opt.height,
				ctx: that
			});
		} catch (e) {
			console.warn(e)
		}
	};
	// 长按事件
	const longtap = (e) => {
		emits('press', e)
	}
	// canvas创建错误 触发
	const handleError = (e) => {
		emits('error', e.detail)
	}
</script>
<!-- #endif -->

<!-- #ifndef VUE3 -->
<script>
	import {
		QRCode,
		GetImg,
		GetPixelRatio,
		GetPx
	} from '@/uni_modules/wmf-code/js_sdk/index.js';
	import {
		getUUid,
		deepClone,
		platform
	} from '../../common/helper.js'
	export default {
		name: 'WQrcode',
		props: {
			options: {
				type: Object,
				required: true,
				default: () => {
					return {

					}
				}
			}
		},
		data() {
			return {
				info: {
					destHeight: 0,
					destWidth: 0,
					width: 0,
					height: 0,
					listCode: [],
				},
				destHeight: 0,
				destWidth: 0,
				width: 0,
				height: 0,
				listCode: [],
				id: getUUid(),
			}
		},
		mounted() {
			this.info.height = this.info.width = GetPx(this.options.size) + 'px';
			this.info.destHeight = this.info.destWidth = GetPx(this.options.size) * GetPixelRatio() + 'px';
			this.SpecialTreatment(this.options)
			this.$nextTick(() => {
				this.generateCode();
			})
		},
		watch: {
			options: {
				deep: true,
				handler(val) {
					console.log(val, 'val---')
					this.info.height = this.info.width = GetPx(val.size) + 'px';
					this.info.destHeight = this.info.destWidth = GetPx(val.size) * GetPixelRatio() + 'px';
					this.SpecialTreatment(val)
					setTimeout(() => { // h5平台动态改变canvas大小
						this.generateCode();
					}, 50)
				}
			}
		},
		methods: {
			longtap(e) { // 长按事件
				this.$emit('press', e);
			},
			handleError(e) { //当发生错误时触发 error 事件，字节跳动小程序与飞书小程序不支持
				this.$emit('error', e.detail)
			},
			SpecialTreatment(val) { //微信小程序渲染多个canvas特殊处理
				let obj = deepClone(val);
				obj.id = this.id;
				this.info.listCode = [obj]
			},
			// 生成二维码
			generateCode() {
				try {
					const parameter = {
						...this.options,
						source: platform(),
						id: this.id,
						ctx: this
					};
					QRCode(parameter, (res) => {
						this.$emit('generate', res)
					})
				} catch (err) {
					console.warn(err)
				}
			},
			// 获取二维码图片
			async GetCodeImg() {
				try {
					return await GetImg({
						id: this.id,
						width: this.options.size,
						height: this.options.size,
						ctx: this
					});
				} catch (e) {
					console.warn(e)
				}
			}
		}
	}
</script>
<!-- #endif -->
